/*
    思路：
        第一步：当页面加载完后，根据本地的数据，动态生成表格（购物车列表）
              获取所要操作的节点对象
             判断购物车中是否有数据？
                有：    显示出购物列表
                没有：提示购物车为空
        第二步：当购物车列表动态生成后，获取tbody里所有 的checkeBox标签节点对象，看那个被选中就获取对应行小计进行总价格运算。
        第三步：
            为每一个checkbox添加一个onchange事件，根据操作更改总价格
        第四步：全选
        第五步：
            为加减按钮添加一个鼠标点击事件
            更改该商品的数量
        第六步：删除
            获取所有的删除按钮
            为删除按钮添加一个鼠标点击事件
            删除当前行，并更新本地数据
 */


window.onload  = function(){
	
   var listObj = getAllData();
   console.log(listObj.length);
    
    //获取页面元素
	var box = document.getElementById("box");  
	var cart = document.getElementById("main_cart");
	
	var tbody = document.getElementById("tbody"); 
	var totalPrice = document.getElementById("totalPrice");
	var allCheck = document.getElementById("allCheck");

	// 判断购物车 是否为空    为空时显示什么内容，不为空时显示什么内容
	if(listObj.length == 0) { //购物车为空
	   box.style.display = "block"
	   cart.style.display = "none"
	} else { 
	  box.style.display = "none"
	  cart.style.display = "block"
	}

    //遍历数据，加载数据到页面
    for(var i = 0, len = listObj.length; i < len; i++) {

        var tr = document.createElement("tr");
        tr.setAttribute("pid", listObj[i].pid);
      //{"pid":值,"pImg":值,"pName":值,"pColor":值,"price":值,"pCount":值},
      
        tr.innerHTML = '<td  style = "width:50px;height:112px">' +
            '<input type="checkbox" class="ck"  />' +
            '</td>' +
            
            '<td style = "width:86px;">' +
            '<img src="' + listObj[i].pImg + '" alt="" />' + 
            '</td>' +
            
            '<td style = "width:530px;">' +
            '<a hrer="" style ="display:block;">'+ listObj[i].pName +'</a> <span> 型号：' + listObj[i].pSize + '颜色：'+ listObj[i].pColor +   
            '</td>' +
            
            '<td>' +
            '￥<span>' + listObj[i].price + '</span>' +
            '</td>' +
            
            '<td>' +
            '<button class="down">-</button><input type="text" value="' + listObj[i].pCount + '" readonly="readonly" class = "cartext"/><button class="up">+</button>' +
            '</td>' +
            
            '<td>' +
            '￥<span>' + listObj[i].price * listObj[i].pCount + '</span>' +
            '</td>' +
            
            '<td>' +
            '<button class="del" >删除</button>' +
            '</td>';
        tbody.appendChild(tr);
    }
 
  /**********功能：计算总价格************/
    var cks = document.querySelectorAll("tbody .ck");
	function getTotalPrice(){
	    var sum = 0;
	    for(var i = 0, len = cks.length; i < len; i++) {
	        if(cks[i].checked) { //如果当前被选中
	            var tr = cks[i].parentNode.parentNode;
	            var temp = tr.children[5].firstElementChild.innerHTML;
	            sum = Number(temp) + sum;
	        }
	    }
	    return sum;
	}

   /******循环遍历为每一个checkbox添加一个onchange事件*****/
	for(var i = 0, len = cks.length; i < len; i++) {
	    cks[i].onchange = function() {
	        checkAllChecked();
	        totalPrice.innerHTML = getTotalPrice();
	    }
	}

	/****************全选实现*****************/
	allCheck.onchange = function(){
	    if(this.checked){
	        for(var i = 0, len = cks.length; i < len; i++) {
	            cks[i].checked = true;
	        }
	     
	    } else {
	        for(var i = 0, len = cks.length; i < len; i++) {
	            cks[i].checked = false;
	        }
	    }
	     totalPrice.innerHTML = getTotalPrice();
	}


	/***************商品加减 *****************/
	var downs = document.querySelectorAll(".down"); //一组减的按钮
	var ups = document.querySelectorAll(".up"); //一组加的按钮
	var dels = document.querySelectorAll(".del"); //一组删除按钮
	
	for(var i = 0, len = downs.length; i < len; i++) {
		//减
	    downs[i].onclick = function(){
	        var txtObj = this.nextElementSibling;//下一个兄弟节点
	        var tr = this.parentNode.parentNode;
	        var pid = tr.getAttribute("pid");
	        txtObj.value = txtObj.value - 1;
	        if(txtObj.value < 1) {
	            txtObj.value = 1;
	            updateObjById(pid, 0)
	        } else {
	            updateObjById(pid,-1)
	        }
	        tr.children[0].firstElementChild.checked = true;
	        checkAllChecked();
	        var price = tr.children[3].firstElementChild.innerHTML;
	        tr.children[5].firstElementChild.innerHTML = price * txtObj.value;
	        totalPrice.innerHTML = getTotalPrice();
	
	    }
	    //加
	    ups[i].onclick = function(){
	        var txtObj = this.previousElementSibling;//上一个兄弟节点
	        var tr = this.parentNode.parentNode;
	        var pid = tr.getAttribute("pid");
	        txtObj.value = Number(txtObj.value) + 1;
	        updateObjById(pid, 1)
	        tr.children[0].firstElementChild.checked = true;
	        checkAllChecked()
	        var price = tr.children[3].firstElementChild.innerHTML;
	        tr.children[5].firstElementChild.innerHTML = price * txtObj.value;
	        totalPrice.innerHTML = getTotalPrice();
	    }
	    //删除
	    dels[i].onclick = function() {
	        var tr = this.parentNode.parentNode;
	        var pid = tr.getAttribute("pid")
	        if(confirm("确定删除？")) {
	            //remove()  删除
	            tr.remove();
	            listObj = deleteObjByPid(pid);
	        }
	        totalPrice.innerHTML = getTotalPrice();
	    }
	}

	/*************检测是否要全选*****************/
	
	function checkAllChecked(){
	    var isSelected = true; //全选是否会选中
	    for(var j = 0, len = cks.length; j < len; j++) {
	        if(cks[j].checked == false) {
	            isSelected = false;
	            break;
	        }
	    }
	    allCheck.checked = isSelected;
	}
	
	
}